<template>
	<view class="main">
		<view class="phone-list-page">
			<view class="loadingBox" v-if="tabActiveList.length==0">
				<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
			</view>
			<view v-else class="phone-list-item" v-for="(item,index) in tabActiveList" :key="index"
				@click="goDetail(item,index)">
				<view class="imgBox">
					<view class="name">
						{{item.name}}
					</view>
					<view class="imgMsg"
						:style="{ backgroundImage: 'url(https://api.jingkakeji.com/' + item.images[0] + ')' }"></view>
				</view>
				<view class="text">
					{{item.shorttitle}}
				</view>
				<view class="price">
					￥<span>{{item.min_price}}</span>/天
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['tabActiveList'],
		data() {
			return {}
		},
		methods: {
			goDetail(item, index) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;

		.phone-list-page {
			width: 100%;
			column-count: 2;
			column-gap: 10px;
			margin-top: 20rpx;

			.loadingBox {
				width: 200rpx;
				height: 100rpx;
				overflow: auto;
				margin-left: calc(100% - 100rpx);
				margin-top: 50rpx;
			}

			.phone-list-item {
				width: 345rpx;
				background-color: white;
				border-radius: 20rpx;
				align-items: center;
				overflow: auto;
				justify-content: space-around;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				.imgBox {
					width: 345rpx;
					height: 345rpx;
					background-image: url("/static/test_img/list-img1.png");
					background-size: cover;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					.name {
						width: 180rpx;
						height: 50rpx;
						position: absolute;
						top: 0;
						left: calc(50% - 90rpx);
						text-align: center;
						line-height: 50rpx;
						font-size: 22rpx;
						font-weight: bold;
						color: white;
						text-indent: 10rpx;

					}

					.imgMsg {
						width: 300rpx;
						height: 220rpx;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
					}
				}

				.text {
					width: 90%;
					font-size: 30rpx;
					word-wrap: break-word;
					margin-top: 20rpx;
				}

				.price {
					width: 90%;
					font-size: 28rpx;
					color: red;
					margin: 20rpx 0px;

					>span {
						font-weight: bold;
						font-size: 36rpx;
					}
				}

			}
		}
	}
</style>